<template>
	<view class="container shopcar">
		<myhead :title="mytitle" class="myhead"></myhead>
		<view class="main">
			<navigator class="usertop" url="../selectuser/selectuser">
				<view class="username">
					客户：临时客户
				</view>
				<image src="../../static/images/blackright.png" class="myicon routericon"></image>
			</navigator>
			<view class="usertop" >
				<view class="username">
					开单日期
				</view>
				<view class="eachbox">
					<text class="text">2021-10-14</text>
					<image src="../../static/images/blackright.png" class="myicon routericon"></image>
				</view>
			</view>
			<view class="productlist">
				<view class="usertop" >
					<view class="username">
						销售单商品
					</view>
					<view class="addproducts" >
						继续添加
					</view>
				</view>
				<scroll-view class="list" scroll-y="true">
					<view class="item" v-for="(item,index) in 4" :key = "index">
						<view class="top">
							<view class="left">
								{{index}}、八爪鱼
							</view>
							<view class="right">
								<view class="count">
									0件
								</view>
								<view class="calc">
									<text style="color: #4CD964;">0</text>
									<text>斤×35元/斤=</text>
									<text style="color: #DD524D;">0</text>
									<text>元</text>
								</view>
							</view>
						</view>
						<view class="header">
							<view class="text">货主名字 211012</view>
							<view class="close">
								删除
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="usertop">
				 <textarea class="textarea" v-model="txt" maxlength="200" placeholder="备注赊欠相关信息"></textarea>
			</view>
			<view class="usertop">
				<view class="total">
					<text>合计：</text>
					<text style="color: #DD524D;">0</text>
					<text>元</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="box clear">
				清空购物车
			</view>
			<navigator class="box jiesuan" url="../crashier/crashier">
				收银
			</navigator>
		</view>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	export default {
		data() {
			return {
				mytitle:'购物车',
			};
		},
		components:{
			myhead
		}
	}
</script>

<style lang="scss" scoped>
.shopcar{
	color: black;
	display: flex;
	flex-direction: column;
	.usertop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		.username{
			font-weight: bold;
			font-size: 34rpx;
		}
		.eachbox{
			display: flex;
			align-items: center;
			.text{
				font-size: 24rpx;
				margin-right: 15rpx;
			}
		}
		.addproducts{
			padding: 10rpx 20rpx;
			border: 2rpx solid #34C758;
			color:  #34C758;
			border-radius: 38rpx;
		}
		.textarea{
			background-color: #EEEEEE;
			border-radius: 16rpx;
			height: 120rpx;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 30rpx;
		}
	}
	.main{
		flex: 1;
		background-color: #EEEEEE;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.productlist{
			margin-bottom: 15rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.usertop{
				padding: 15rpx 20rpx;
				border-bottom-left-radius:0 ;
				border-bottom-right-radius:0 ;
				margin-bottom: 2rpx;
			}
			.list{
				flex: 1;
				background-color: #FFFFFF;
				padding: 20rpx;
				border-bottom-left-radius:16rpx ;
				border-bottom-right-radius:16rpx ;
				// height: 450rpx;
				overflow: hidden;
				box-sizing: border-box;
				.item{
					background-color: #EEEEEE;
					padding: 20rpx;
					border-radius: 16rpx;
					margin-bottom: 10rpx;
					position: relative;
					box-sizing: border-box;
					width: 100%;
					.top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 30rpx;
						.left{
							
						}
						.right{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.count{
								font-size: 24rpx;
								width: 40rpx;
								height: 40rpx;
								padding: 0rpx 10rpx;
								background-color: #4CD964;
								line-height: 40rpx;
								text-align: center;
								color: #FFFFFF;
								margin-right: 10rpx;
							}
							.calc{
								font-size: 30rpx;
							}
						}
						margin-bottom: 20rpx;
					}
					.header{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.text{
							font-size: 24rpx;
							color: gray;
						}
						.close{
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 10rpx 20rpx;
							width: 60rpx;
							background-color: #DD524D;
							border-radius: 20rpx;
							text-align:justify;
							text-justify:distribute-all-lines;/*ie6-8*/
							text-align-last:justify;/* ie9*/
							-moz-text-align-last:justify;/*ff*/
							-webkit-text-align-last:justify;/*chrome 20+*/
						}
					}
					
				}
			}
		}
	}
	.footer{
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		.box{
			font-size: 30rpx;
			padding: 15rpx 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			width: 40%;
			text-align: center;
		}
		.clear{
			border: 2rpx solid #DD524D;
			color:  #DD524D;
		}
		.jiesuan{
			background-color: #4CD964;
			color: #FFFFFF;
		}
	}
}
</style>
